8f:I[903690,["/chat-static/_next/static/chunks/435czfth5g2--.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2_n93kjda_fdl.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/30o49bxvrjjd6.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1sq2o-tfpylmv.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3zzkx917psnab.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0it1pzxkmrfao.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3atxap5dfgc15.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0zgvhc0bf_u8a.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2ftie8t1d4ln0.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/29nl-qtda_xxs.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/217iosoo3xo9p.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/34gqg8-10x0ii.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1kb78w76_8v_1.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1477qb8awntub.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1idcvvlvpraly.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3uqcu8e1bha9q.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0xl0120nvocrt.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1-appp6o5mjft.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0l0qq-d4mckrp.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2tb4isnwy1ped.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1x-_zdr_qor_a.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2-zrgd218l_od.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3wbcbeex0k_cg.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2tdl36x_a1l97.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/chunks/435czfth5g2--.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2_n93kjda_fdl.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/30o49bxvrjjd6.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1sq2o-tfpylmv.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3zzkx917psnab.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0it1pzxkmrfao.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3atxap5dfgc15.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0zgvhc0bf_u8a.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2ftie8t1d4ln0.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/29nl-qtda_xxs.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/217iosoo3xo9p.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/34gqg8-10x0ii.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1kb78w76_8v_1.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1477qb8awntub.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1idcvvlvpraly.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3uqcu8e1bha9q.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0xl0120nvocrt.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1-appp6o5mjft.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/0l0qq-d4mckrp.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2tb4isnwy1ped.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/1x-_zdr_qor_a.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2-zrgd218l_od.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/3wbcbeex0k_cg.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac","/chat-static/_next/static/chunks/2tdl36x_a1l97.js?dpl=dpl_Epok8qzKWXb6wCDR7Pii85d6umac"],"SWRDataProvider"] 91:T15f6,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import LiquidGlassButton from "@/components/liquid-glass-button" export default function Home() { return } [V0_FILE]typescriptreact:file="components/liquid-glass-button.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" // Interactive liquid glass button with spotlight text reveal and ripple droplets. // Works on both desktop (mouse hover/move/click) and mobile (touch move/tap). // The button should look like translucent glass with blur, glossy highlights, // animated gradient background, and liquid-like ripples on interaction. import { useState } from "react" import { motion } from "framer-motion" export default function LiquidGlassButton() { // spotlight position inside button const [pos, setPos] = useState({ x: 0, y: 0 }) const [hovering, setHovering] = useState(false) // ripple droplets const [ripples, setRipples] = useState<{ id: number; x: number; y: number }[]>([]) let rippleId = 0 const addRipple = (x: number, y: number) => { const newRipple = { id: rippleId++, x, y } setRipples((prev) => [...prev, newRipple]) // remove ripple after animation setTimeout(() => { setRipples((prev) => prev.filter((r) => r.id !== newRipple.id)) }, 1000) } const handleMouseMove = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect() setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top }) } const handleTouchMove = (e: React.TouchEvent) => { const rect = e.currentTarget.getBoundingClientRect() const touch = e.touches[0] setPos({ x: touch.clientX - rect.left, y: touch.clientY - rect.top }) } const handleClick = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect() addRipple(e.clientX - rect.left, e.clientY - rect.top) } const handleTouchStart = (e: React.TouchEvent) => { const rect = e.currentTarget.getBoundingClientRect() const touch = e.touches[0] addRipple(touch.clientX - rect.left, touch.clientY - rect.top) setHovering(true) } const handleTouchEnd = () => { setHovering(false) } return (

{/* subtle animated background overlay */} {/* liquid glass button */} setHovering(true)} onMouseLeave={() => setHovering(false)} onMouseMove={handleMouseMove} onClick={handleClick} onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.97 }} className="relative overflow-hidden rounded-2xl px-10 py-5 backdrop-blur-3xl bg-white/10 border-2 border-white/40 shadow-[0_8px_32px_rgba(255,255,255,0.1),inset_0_1px_0_rgba(255,255,255,0.6)] ring-1 ring-white/20" style={{ WebkitBackdropFilter: "blur(40px)", backdropFilter: "blur(40px)", }} >

{/* ripple droplets (mouse or touch) */}

{ripples.map((ripple) => ( ))}

Reveal Message

{/* spotlight reveals full text (works with mouse + touch) */} Reveal Message

) }85:["$","$L8f",null,{"chatId":"lj71Vu4ggoA","children":["$","$L90",null,{"data":{"@\"active-block\",\"lj71Vu4ggoA\",":{"id":"b_cM3s0loCArw","messageId":"YTdj5knayflVCNAhbOCOmJEf9szcPIky","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"liquid-glass-button","type":"code-project","project":"liquid-glass-button","taskNameActive":"Enhancing glass effects","taskNameComplete":"Enhanced glass effects"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"lj71Vu4ggoA\",":false,"":null},"children":"$L92"}]}]

About

Tags

Share

About

Tags

Share

More from damilareoo

More Templates Like This